<!DOCTYPE html>
<html>
<head>
 	<meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <title>bootstrap</title>
    <meta name="keywords" content="关键字"/>
    <meta name="description" content="描述"/>
    <!-- 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <!-- 从网上引入 -->
      <!-- <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
      <link href="/css/index.css" rel="stylesheet">
      <style type="text/css">
      	.n{
      		background: #7a7a7a;
      		border:1px solid #fff;
      	}
      </style>
</head>
<body>
<div class="container-fluid">
			<!-- 这是一行 -->
	<div class="row">
  <div class="col-xs-1 col-md-1">a
  	<div class="k"></div></div>
  <div class="col-xs-1 col-md-1">a<div class="k"></div></div></div>
  <div class="col-xs-1 col-md-1">a<div class="k"></div></div>
  <div class="col-xs-1 col-md-1">a<div class="k"></div></div>
  <div class="col-xs-1 col-md-1">a<div class="k"></div></div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="col-xs-1 col-md-1">a</div>
  <div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
<!-- col-xs-最小的移动设备 col-md-中型设备台式电脑  col-sm- 小型设备平板电脑 col-lg- 大型设备台式电脑 -->
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div> 
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example. </div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
 <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
	<div class="row">
	  <div class="col-md-4">.col-md-4</div>
	  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
	</div>
	<div class="row">
	  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
	  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
	</div>
	<div class="row">
	  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
	</div>
</div>
	<div class="row">
	    <div class="col-sm-9 x">
	    Level 1: .col-sm-9
		    <div class="row">
		      <div class="col-xs-8 col-sm-6 m">
		        Level 2: .col-xs-8 .col-sm-6
		      </div>
		      <div class="col-xs-4 col-sm-6 a">
		        Level 2: .col-xs-4 .col-sm-6
		      </div>
		    </div>
  	    </div>
	</div>
	<div class="row">
	  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
	  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
	</div>
	<div class="row">
		<div class="wrapper">
		  <div class="content-main">hahahah</div>
		  <div class="content-secondary">lalalla</div>
		</div>
	</div>
	<div class="row">
		<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="lead">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
		<p>文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。</p>
		<p>You can use the mark tag to <mark>highlight</mark> text.</p>
		<!-- 被删除的文本 -->
		<del>This line of text is meant to be treated as deleted text.</del>
		<div class="clear"></div>
		<!-- 无用的文本 --><!-- del和s标签都是行内元素 -->
		<s>This line of text is meant to be treated as no longer accurate.</s>
		<div class="clear"></div>
		<!-- 插入文本 就是在文字的下面加入了下划线 small标签小号文本-->
		<ins><small class="small">This line of text is meant to be treated as fine print.</small>This line of text is meant to be treated as an addition to the document.</ins>
		<!-- 带下划线的文本 -->
		<u>This line of text will render as underlined</u>
		<p class="text-left">Left aligned text.</p>
		<p class="text-center">Center aligned text.</p>
		<p class="text-right">Right aligned text.</p>
		<p class="text-justify">Justified text.</p>
		<p class="text-nowrap">No wrap text.</p>
		<p class="text-lowercase">Lowercased text.</p>
		<p class="text-uppercase">Uppercased text.</p>
		<p class="text-capitalize">Capitalized text.</p>
		<!-- abbr缩略语 -->
		<abbr class="initialism" title="attraaaaaaa">attraaaaaaa</abbr>
		<!-- 地址 -->
		<address>
		  <strong>Twitter, Inc.</strong><br>
		  1355 Market Street, Suite 900<br>
		  San Francisco, CA 94103<br>
		  <abbr title="Phone">P:</abbr> (123) 456-7890
		</address>

		<address>
		  <strong>Full Name</strong><br>
		  <a href="mailto:#">first.last@example.com</a>
		</address>
		<div class="row">
		<div class="col-sm-4">
			<!-- 引用样式 -->
			<blockquote>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			</blockquote>
		</div>
		<div class="col-md-3">
		<blockquote>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>
			<blockquote class="blockquote-reverse">
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>
		</div>
		<div class="col-md-12">
			<ul>
				<li> Lorem ipsum dolor sit amet</li>
				<li>Consectetur adipiscing elit</li>
				<li>Integer molestie lorem at massa</li>
					<ul>
						<li>Phasellus iaculis neque</li>
						<ul>
							<li>Phasellus iaculis neque</li>
						</ul>
						<li>Purus sodales ultricies</li>
       				    <li>Ac tristique libero volutpat at</li>
					</ul>
				</li>
			</ul>
		</div>	
		</div>
		</div>
		<div class="col-md-12">
			<dl class="dl-horizontal">
			  <dt>Description lists</dt>
			  <dd>A description list is perfect for defining terms.</dd>
			</dl>
			To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
			To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
			<pre class="pre-scrollable">&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
			<div class="col-md-3">
				<div class="row">
					<table class="table table-striped table-bordered table-condensed table-hover">
						<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
						<tr><td>小明</td><td>男</td><td>123</td></tr>
					</table>
				</div>			
			</div>
			<div class="col-md-4">
				<div class="row">
					<table class="table table-striped table-bordered table-condensed table-hover">
						<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
						<tr><td>小明</td><td>男</td><td>123</td></tr>
					</table>
					<div class="table-responsive">
						<table class="table table-striped table-bordered table-condensed table-hover">
						<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
						<tr><td>小明</td><td>男</td><td>123</td></tr>
					</table>
					</div>
				</div>				
			</div>
			<div class="col-md-7">
				<div class="row">
					<form class="form-inline">
					  <div class="form-group">
					    <label for="exampleInputEmail1">Email address</label>
					    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Password</label>
					    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputFile">File input</label>
					    <input type="file" id="exampleInputFile">
					    <p class="help-block">Example block-level help text here.</p>
					  </div>
					  <div class="checkbox">
					    <label>
					      <input type="checkbox"> Check me out
					    </label>
					  </div>
					  <button type="submit" class="btn btn-default">Submit</button>
					</form>
				</div>
			</div>
			<div class="col-md-9">
				<div class="form-group has-success has-feedback">
				  <label class="control-label" for="inputSuccess2">Input with success</label>
				  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
				  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  <span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				<div class="form-group has-warning has-feedback">
				  <label class="control-label" for="inputWarning2">Input with warning</label>
				  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
				  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
				  <span id="inputWarning2Status" class="sr-only">(warning)</span>
				</div>
				<div class="form-group has-error has-feedback">
				  <label class="control-label" for="inputError2">Input with error</label>
				  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
				  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
				  <span id="inputError2Status" class="sr-only">(error)</span>
				</div>
				<div class="form-group has-success has-feedback">
				  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
				  <div class="input-group">
				    <span class="input-group-addon">@</span>
				    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
				  </div>
				  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
				</div>
			</div>
			<div class="col-md-4">
				<div class="row">
					<form class="form-inline">
					  <div class="form-group has-success has-feedback">
					    <label class="control-label" for="inputSuccess4">Input with success</label>
					    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
					    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					    <span id="inputSuccess4Status" class="sr-only">(success)</span>
					  </div>
					</form>
					<form class="form-inline">
					  <div class="form-group has-success has-feedback">
					    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
					    <div class="input-group">
					      <span class="input-group-addon">@</span>
					      <input type="text" class="form-control" id="	9inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
					    </div>
					    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
					  </div>
					</form>
				</div>			
			</div>
			
		</div>		
		
	</div>
	
</body>
</html>